<template>
  <div class="city">
    <mt-header title="城市选择" fixed>
      <router-link to slot="left">
        <mt-button icon="back" @click="$router.go(-1)"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div class="search">
      <input class="search-input" type="text" placeholder="输入城市名或拼音" v-model="keyword" />
    </div>
    <div class="search-content" v-show="keyword">
      <ul>
        <li
          class="search-item"
          v-for="item in list"
          :key="item.id"
          @click="clickCity(item.name)"
        >{{item.name}}</li>
        <li class="search-item" v-show="! list.length">没有找到匹配数据</li>
      </ul>
    </div>

    <mt-index-list>
      <div class="area">
        <div class="title border-topbotton">当前城市</div>
        <div class="button-list">
          <div class="button-swapper">
            <div class="button">{{this.$store.state.city}}</div>
          </div>
        </div>
      </div>
      <div class="area">
        <div class="title border-topbotton">热门城市</div>
        <div class="button-list">
          <div
            class="button-swapper"
            v-for="item in hotCities"
            :key="item.id"
            @click="clickCity(item)"
          >
            <div class="button">{{item.name}}</div>
          </div>
        </div>
      </div>
      <!-- <mt-index-section v-for="item in alphabet" :index="item.initial" :key="item.initial">
        <mt-cell v-for="(cell,index) in item.cells" :title="cell" :key="index"></mt-cell>
      </mt-index-section>-->
      <mt-index-section v-for="(item,key) in cities" :index="key" :key="key">
        <mt-cell
          v-for="innerItem in item"
          :title="innerItem.name"
          :key="innerItem.id"
          @click.native="clickCity(innerItem)"
        ></mt-cell>
      </mt-index-section>
    </mt-index-list>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "city",
  data() {
    return {
      value: "",
      keyword: "",
      list: [],
      alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""),
      cities: {},
      hotCities: []
    };
  },
  props: [],
  methods: {
    getCityInfo() {
      // axios.get("/static/mock/city.json").then(res => {
      axios.get("/api/area/cityList").then(res => {
        // console.log(res.data);
        if (res.status == 200 && res.data) {
          let data = res.data.data;
          this.hotCities = [
            data[0],
            data[1],
            data[2],
            data[3],
            data[4],
            data[5]
          ];
          // console.log(this.hotCities);
          this.alphabet.forEach(i => {
            this.cities[i] = [];
          });
          data.forEach(item => {
            this.alphabet.forEach(i => {
              if (i == item.spell.slice(0, 1).toLocaleUpperCase()) {
                this.cities[i].push(item);
              }
            });
          });
          console.log(this.cities);
        }
      });
    },
    clickCity(city) {
      this.$store.dispatch("changeCityAct", city.name);
      this.$router.go("-1");
      axios.post("/api/user/edit", {
        id:localStorage.userId,
        cityId: city.id,
        cityName: city.name
      }).then(res => {
        console.log(res.data);
      })
    }
  },
  mounted() {
    this.getCityInfo();
  },
  watch: {
    keyword() {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      if (!this.keyword) {
        this.list = [];
        return;
      }
      this.timer = setTimeout(() => {
        const result = [];
        for (let i in this.cities) {
          this.cities[i].forEach(value => {
            if (
              value.spell.indexOf(this.keyword) > -1 ||
              value.name.indexOf(this.keyword) > -1
            ) {
              result.push(value);
            }
          });
        }
        this.list = result;
      }, 100);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/variable.styl';

.city {
  position: relative;

  .search {
    width: 100%;
    height: 35px;
    // padding: 0 0.1rem;
    background-color: $themeColor;
    position: fixed;
    top: 40px;
    display: flex;
    z-index: 99;

    .search-input {
      flex: 1;
      // width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 0.1rem;
      color: #666;
      padding: 0 0.1rem;
      margin: 0 0.1rem;
    }
  }

  .search-content {
    margin-top 75px
    overflow: scroll;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #eee;
    z-index: 1;

    .search-item {
      line-height: 0.6rem;
      padding: 0.2rem;
      background-color: #fff;
      color: #666;
      border-bottom: 1px solid #eee;
    }
  }

  .mint-indexlist {
    padding-top 75px;
    height 100%
    box-sizing: border-box;

    .area {
      .title {
        height: 34px;
        line-height: 34px;
        padding: 0 10px;
        background-color: #fafafa;
      }

      .button-list {
        overflow: hidden;
        padding: 0.1rem;

        .button-swapper {
          float: left;
          width: 33.33%;
          text-align: center;

          .button {
            margin: 0.1rem;
            padding: 0.1rem 0;
            border: 0.02rem solid #ccc;
            border-radius: 0.06rem;
          }
        }
      }
    }

    >>> .mint-indexlist-content {
      height: 100%;
      overflow: scroll;
    }
  }
}

.border-topbotton {
  &:before {
    border-color: #ccc;
  }

  &:after {
    border-color: #ccc;
  }
}
</style>